JavaScript by Robert C. Etheredge

Author:Robert C. Etheredge [Etheredge, Robert C.]
Language: eng
Format: epub, pdf
Tags: Programming
Publisher: MiraVista Press
Published: 2017-02-03T00:00:00+00:00

6

CSS Techniques

You can use Cascading Style Sheets (CSS) to format your HTML displays. With the release of CSS 3, your applications can now take advantage of many powerful new features that add animation, drop shadows, and more display control for mobile devices. This chapter is not a CSS reference manual or a detailed description of each CSS property but rather a collection of some general comments about common CSS uses and problems.

Including CSS in your application

There are several ways to add CSS styling to your HTML apps. You should be aware of the strengths and weaknesses of each method and decide accordingly. Your optimum solution may even be a combination of two or more of the methods. The methods include:

1. Adding your CSS definitions inside <style></style> tags in your HTML. These would have to be repeated inside each HTML file the definitions are used for.

2. Put your CSS definitions in a separate CSS file that you include inside your HTML by specifying something similar to the following inside your head tag. This allows one CSS definition file to be used by multiple HTML files and load faster since it will be cached locally after the first access, but you will have to include a reference to this file in each of your HTML files.

<link rel="stylesheet" href="index.css" type="text/css">

3. Load an external CSS file from inside your JavaScript code using an XMLHttpRequest method. This may be useful if you want to delay loading some files, or if the CSS is only needed some of the time, or if you need to load different CSS files based on some value available at runtime. You may have subdirectories of CSS organized by theme or company name and you may want to select which ones to load.

4. Include the necessary CSS properties directly inline in the HTML tags. This is generally not recommended as it doesn't allow the display to be separated from the data and styles cannot be shared but are actually overridden.

5. Use JavaScript commands to assign style attributes or classes to specific elements.

Position property

In laying out your screens, you need to decide if you are going to use absolute positioning or rely on letting the normal flow determine the position of the elements. In designing mobile phone applications, I usually rely on absolute positioning to ensure text and graphics line up properly. Websites or apps that contain more random data may do better to use static or relative positioning. One advantage of absolute positioning is that the entire document does not have to reflow if you move one element.

• static: (default). The element is positioned in the position determined by the normal flow of the page.

• relative: You can set left or top values to move the element relative to its normal flow position. But the original position and size is saved and used for positioning the next static or relative element.

• absolute: Specifying a top and left value positions the element at this position relative to its container. It does not affect how other static or relative elements are positioned.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.